<template>
  <!-- 商城收银台 -->
  <el-container>
    <el-main>
      <el-card>
        <div style="font-size: 14px">
          <span> 订单提交成功，请尽快付款! 订单号: {{ ordernumber }} </span>
          <span style="float: right"
            >应付金额:<span
              style="font-size: 18px; color: red; font-weight: 900"
            >
              {{ price }}</span
            >
          </span>
        </div>
        <hr style="border-color: #eeeeee; margin-top: 1rem" />
        <h1 style="font-size:28px;">支付方式</h1>
        <div style="text-align: center; padding: 1rem  ">
          <span class="i9Account" style="">
            就爱支付
          </span>

          <el-checkbox-group
            v-for="item in paylist"
            :key="item.id"
            @click="selectRadio(item.id)"
            style="border: solid 1px #eeeeee;"
            label="item.id"
          >
            <table style="width: 100%; ">
              <tr>
                <td style="width: 5%; ">
                  <el-radio v-model="radio" @click.native.prevent="selectRadio(item.pay)" :label="item.id">&nbsp;</el-radio>
                </td>
                <td style="width: 10%; text-align: left;  height: 5rem">
                  <el-tag
                    type="info"
                    effect="plain"
                    style="text-align: center; width: 10rem;"
                  >
                    {{ item.pay }}支付
                  </el-tag>
                </td>
                <td>
                  <span style="float: left; margin-left: 1rem">
                    <span style="font-size: 18px; color: red; font-weight: 900">
                      <span style="font-size: 14px; font-weight: 300; color: #000">
                        应付金额:
                      </span>
                      {{ price }}
                    </span>
                  </span>
                </td>
                <td></td>
              </tr>
            </table>
          </el-checkbox-group>

          <span style="float: right; margin-top: 1rem; margin-botton: 1rem; ">
            <el-button style="width: 9rem; height: 3rem;" @click="closeOver">
              立即支付
            </el-button>
          </span>
        </div>
        <br />
        <br />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      ordernumber: 123456789123,
      price: 3599.0,
      checkList: [{}],
      radio: false,
      paylist: [
        {
          id: 1,
          pay: "微信",
          radio: '0',
        },
        {
          id: 2,
          pay: "支付宝",
          radio: '0',
        },
        {
          id: 3,
          pay: "银行卡",
          radio: '0',
        },
        {
          id: 4,
          pay: "信用卡",
          radio: 1,
        },
      ],
    };
  },
  methods: {
    selectRadio: function(pay) {
      alert('你选择了' + pay + '支付');
    },
    closeOver(){
      alert('支付成功');
      this.$router.push('')
    }
  },
};
</script>

<style scoped>
* {
  list-style: none;
  user-select: none;
}
.i9Account {
  float: left;
  color: #2290ff;
  font-weight: 1000;
  font-size: 20px;
  padding: 0.5rem;
  background-color: #e0eefc;
  border-radius: 3px;
  border-bottom-right-radius: 1rem;
  height: 2rem;
}
</style>
